import React from "react";
import axios from 'axios'
import { Button, Card, Checkbox, Col, Form, Input, message, Row } from "antd";
const onFinish = async (values) => {
  console.log("Success:", values);
  let url = 'http://localhost:3000/users'
  let res = await axios.post(url,values)
  console.log('注册',res);
  let {code,msg} = res.data
  if(code==0){
    message.error(msg)
  }else{
    message.success(msg)
  }
};
const onFinishFailed = (errorInfo) => {
  console.log("Failed:", errorInfo);
};
const Reg = () => (
  <Row justify="center" align="middle" style={{height:'100vh',background:'#ABA2EC'}}>
    <Col span={8}>
      <Card title="注册" extra={<a href="#">More</a>}>
        <Form
          name="basic"
          labelCol={{
            span: 8,
          }}
          wrapperCol={{
            span: 16,
          }}
          style={{
            maxWidth: 600,
          }}
          initialValues={{
            remember: true,
          }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="账号"
            name="username"
            rules={[
              {
                required: true,
                message: "Please input your username!",
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="密码"
            name="password"
            rules={[
              {
                required: true,
                message: "Please input your password!",
              },
            ]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item name="remember" valuePropName="checked" label={null}>
            <Checkbox>Remember me</Checkbox>
          </Form.Item>

          <Form.Item label={null}>
            <Button type="primary" htmlType="submit">
              注册
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </Col>
  </Row>
);
export default Reg;
